<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="插入时间" prop="inserted">
        <el-date-picker
          v-model="formData.inserted"
          type="date"
          value-format="x"
          placeholder="选择插入时间"
        />
      </el-form-item>
      <el-form-item label="IP地址" prop="hostname">
        <el-input v-model="formData.hostname" placeholder="请输入IP地址" />
      </el-form-item>
      <el-form-item label="系统名称" prop="sysName">
        <el-input v-model="formData.sysName" placeholder="请输入系统名称" />
      </el-form-item>
      <el-form-item label="显示名称" prop="display">
        <el-input v-model="formData.display" placeholder="请输入显示名称" />
      </el-form-item>
      <el-form-item label="ip" prop="ip">
        <el-input v-model="formData.ip" placeholder="请输入ip" />
      </el-form-item>
      <el-form-item label="overwrite_ip" prop="overwriteIp">
        <el-input v-model="formData.overwriteIp" placeholder="请输入overwrite_ip" />
      </el-form-item>
      <el-form-item label="SNMP社区字符串" prop="community">
        <el-input v-model="formData.community" placeholder="请输入SNMP社区字符串" />
      </el-form-item>
      <el-form-item label="认证级别" prop="authlevel">
        <el-input v-model="formData.authlevel" placeholder="请输入认证级别" />
      </el-form-item>
      <el-form-item label="authname" prop="authname">
        <el-input v-model="formData.authname" placeholder="请输入authname" />
      </el-form-item>
      <el-form-item label="authpass" prop="authpass">
        <el-input v-model="formData.authpass" placeholder="请输入authpass" />
      </el-form-item>
      <el-form-item label="认证算法" prop="authalgo">
        <el-input v-model="formData.authalgo" placeholder="请输入认证算法" />
      </el-form-item>
      <el-form-item label="加密密码" prop="cryptopass">
        <el-input v-model="formData.cryptopass" placeholder="请输入加密密码" />
      </el-form-item>
      <el-form-item label="加密算法" prop="cryptoalgo">
        <el-input v-model="formData.cryptoalgo" placeholder="请输入加密算法" />
      </el-form-item>
      <el-form-item label="SNMP版本" prop="snmpver">
        <el-input v-model="formData.snmpver" placeholder="请输入SNMP版本" />
      </el-form-item>
      <el-form-item label="port" prop="port">
        <el-input v-model="formData.port" placeholder="请输入port" />
      </el-form-item>
      <el-form-item label="传输协议" prop="transport">
        <el-input v-model="formData.transport" placeholder="请输入传输协议" />
      </el-form-item>
      <el-form-item label="timeout" prop="timeout">
        <el-input v-model="formData.timeout" placeholder="请输入timeout" />
      </el-form-item>
      <el-form-item label="重试次数" prop="retries">
        <el-input v-model="formData.retries" placeholder="请输入重试次数" />
      </el-form-item>
      <el-form-item label="是否启用snmp，0为启用，其他为禁用" prop="snmpDisable">
        <el-radio-group v-model="formData.snmpDisable">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="BGP本地自治系统号" prop="bgpLocalAs">
        <el-input v-model="formData.bgpLocalAs" placeholder="请输入BGP本地自治系统号" />
      </el-form-item>
      <el-form-item label="sysObjectID" prop="sysObjectID">
        <el-input v-model="formData.sysObjectID" placeholder="请输入sysObjectID" />
      </el-form-item>
      <el-form-item label="系统描述" prop="sysDescr">
        <el-input v-model="formData.sysDescr" placeholder="请输入系统描述" />
      </el-form-item>
      <el-form-item label="默认系统联系人" prop="sysContact">
        <el-input v-model="formData.sysContact" placeholder="请输入默认系统联系人" />
      </el-form-item>
      <el-form-item label="版本" prop="version">
        <el-input v-model="formData.version" placeholder="请输入版本" />
      </el-form-item>
      <el-form-item label="硬件" prop="hardware">
        <el-input v-model="formData.hardware" placeholder="请输入硬件" />
      </el-form-item>
      <el-form-item label="特征" prop="features">
        <el-input v-model="formData.features" placeholder="请输入特征" />
      </el-form-item>
      <el-form-item label="操作系统" prop="locationId">
        <el-input v-model="formData.locationId" placeholder="请输入操作系统" />
      </el-form-item>
      <el-form-item label="操作系统" prop="os">
        <el-input v-model="formData.os" placeholder="请输入操作系统" />
      </el-form-item>
      <el-form-item label="状态，1为在线，其他为离线" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="status_reason" prop="statusReason">
        <el-input v-model="formData.statusReason" placeholder="请输入status_reason" />
      </el-form-item>
      <el-form-item label="ignore" prop="ignore">
        <el-radio-group v-model="formData.ignore">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="0为不禁止，其他为禁止" prop="disabled">
        <el-radio-group v-model="formData.disabled">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="系统运行时间" prop="uptime">
        <el-date-picker
          v-model="formData.uptime"
          type="date"
          value-format="x"
          placeholder="选择系统运行时间"
        />
      </el-form-item>
      <el-form-item label="代理运行时间" prop="agentUptime">
        <el-date-picker
          v-model="formData.agentUptime"
          type="date"
          value-format="x"
          placeholder="选择代理运行时间"
        />
      </el-form-item>
      <el-form-item label="最后轮询时间" prop="lastPolled">
        <el-date-picker
          v-model="formData.lastPolled"
          type="date"
          value-format="x"
          placeholder="选择最后轮询时间"
        />
      </el-form-item>
      <el-form-item label="最后轮询尝试时间" prop="lastPollAttempted">
        <el-date-picker
          v-model="formData.lastPollAttempted"
          type="date"
          value-format="x"
          placeholder="选择最后轮询尝试时间"
        />
      </el-form-item>
      <el-form-item label="最后轮询耗时" prop="lastPolledTimetaken">
        <el-input v-model="formData.lastPolledTimetaken" placeholder="请输入最后轮询耗时" />
      </el-form-item>
      <el-form-item label="最后发现耗时" prop="lastDiscoveredTimetaken">
        <el-input v-model="formData.lastDiscoveredTimetaken" placeholder="请输入最后发现耗时" />
      </el-form-item>
      <el-form-item label="最后发现时间" prop="lastDiscovered">
        <el-date-picker
          v-model="formData.lastDiscovered"
          type="date"
          value-format="x"
          placeholder="选择最后发现时间"
        />
      </el-form-item>
      <el-form-item label="最后Ping时间" prop="lastPing">
        <el-date-picker
          v-model="formData.lastPing"
          type="date"
          value-format="x"
          placeholder="选择最后Ping时间"
        />
      </el-form-item>
      <el-form-item label="最后Ping耗时" prop="lastPingTimetaken">
        <el-input v-model="formData.lastPingTimetaken" placeholder="请输入最后Ping耗时" />
      </el-form-item>
      <el-form-item label="用途" prop="purpose">
        <el-input v-model="formData.purpose" placeholder="请输入用途" />
      </el-form-item>
      <el-form-item label="type" prop="type">
        <el-select v-model="formData.type" placeholder="请选择type">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="序列号" prop="serial">
        <el-input v-model="formData.serial" placeholder="请输入序列号" />
      </el-form-item>
      <el-form-item label="icon" prop="icon">
        <el-input v-model="formData.icon" placeholder="请输入icon" />
      </el-form-item>
      <el-form-item label="轮询组" prop="pollerGroup">
        <el-input v-model="formData.pollerGroup" placeholder="请输入轮询组" />
      </el-form-item>
      <el-form-item label="是否覆盖系统位置" prop="overrideSyslocation">
        <el-radio-group v-model="formData.overrideSyslocation">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="notes" prop="notes">
        <el-input v-model="formData.notes" placeholder="请输入notes" />
      </el-form-item>
      <el-form-item label="端口关联模式" prop="portAssociationMode">
        <el-input v-model="formData.portAssociationMode" placeholder="请输入端口关联模式" />
      </el-form-item>
      <el-form-item label="最大深度" prop="maxDepth">
        <el-input v-model="formData.maxDepth" placeholder="请输入最大深度" />
      </el-form-item>
      <el-form-item label="是否禁用通知" prop="disableNotify">
        <el-radio-group v-model="formData.disableNotify">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否忽略状态" prop="ignoreStatus">
        <el-radio-group v-model="formData.ignoreStatus">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="quyu" prop="quyu">
        <el-input v-model="formData.quyu" placeholder="请输入quyu" />
      </el-form-item>
      <el-form-item label="子区域" prop="quyusub">
        <el-input v-model="formData.quyusub" placeholder="请输入子区域" />
      </el-form-item>
      <el-form-item label="tag1" prop="tag1">
        <el-input v-model="formData.tag1" placeholder="请输入tag1" />
      </el-form-item>
      <el-form-item label="tag2" prop="tag2">
        <el-input v-model="formData.tag2" placeholder="请输入tag2" />
      </el-form-item>
      <el-form-item label="tag3" prop="tag3">
        <el-input v-model="formData.tag3" placeholder="请输入tag3" />
      </el-form-item>
      <el-form-item label="tag4" prop="tag4">
        <el-input v-model="formData.tag4" placeholder="请输入tag4" />
      </el-form-item>
      <el-form-item label="tag5" prop="tag5">
        <el-input v-model="formData.tag5" placeholder="请输入tag5" />
      </el-form-item>
      <el-form-item label="tag6" prop="tag6">
        <el-input v-model="formData.tag6" placeholder="请输入tag6" />
      </el-form-item>
      <el-form-item label="tag7" prop="tag7">
        <el-input v-model="formData.tag7" placeholder="请输入tag7" />
      </el-form-item>
      <el-form-item label="tag8" prop="tag8">
        <el-input v-model="formData.tag8" placeholder="请输入tag8" />
      </el-form-item>
      <el-form-item label="tag9" prop="tag9">
        <el-input v-model="formData.tag9" placeholder="请输入tag9" />
      </el-form-item>
      <el-form-item label="tag10" prop="tag10">
        <el-input v-model="formData.tag10" placeholder="请输入tag10" />
      </el-form-item>
      <el-form-item label="tag11" prop="tag11">
        <el-input v-model="formData.tag11" placeholder="请输入tag11" />
      </el-form-item>
      <el-form-item label="tag12" prop="tag12">
        <el-input v-model="formData.tag12" placeholder="请输入tag12" />
      </el-form-item>
      <el-form-item label="tag13" prop="tag13">
        <el-input v-model="formData.tag13" placeholder="请输入tag13" />
      </el-form-item>
      <el-form-item label="xianlu" prop="xianlu">
        <el-input v-model="formData.xianlu" placeholder="请输入xianlu" />
      </el-form-item>
      <el-form-item label="SNMP启用状态" prop="snmpyes">
        <el-input v-model="formData.snmpyes" placeholder="请输入SNMP启用状态" />
      </el-form-item>
      <el-form-item label="类型名称" prop="typeName">
        <el-input v-model="formData.typeName" placeholder="请输入类型名称" />
      </el-form-item>
      <el-form-item label="拓扑图x" prop="x">
        <el-input v-model="formData.x" placeholder="请输入拓扑图x" />
      </el-form-item>
      <el-form-item label="拓扑图y" prop="y">
        <el-input v-model="formData.y" placeholder="请输入拓扑图y" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { DevicesApi, Devices } from '@/api/business/devices'

/** 设备 表单 */
defineOptions({ name: 'DevicesForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  deviceId: undefined,
  inserted: undefined,
  hostname: undefined,
  sysName: undefined,
  display: undefined,
  ip: undefined,
  overwriteIp: undefined,
  community: undefined,
  authlevel: undefined,
  authname: undefined,
  authpass: undefined,
  authalgo: undefined,
  cryptopass: undefined,
  cryptoalgo: undefined,
  snmpver: undefined,
  port: undefined,
  transport: undefined,
  timeout: undefined,
  retries: undefined,
  snmpDisable: undefined,
  bgpLocalAs: undefined,
  sysObjectID: undefined,
  sysDescr: undefined,
  sysContact: undefined,
  version: undefined,
  hardware: undefined,
  features: undefined,
  locationId: undefined,
  os: undefined,
  status: undefined,
  statusReason: undefined,
  ignore: undefined,
  disabled: undefined,
  uptime: undefined,
  agentUptime: undefined,
  lastPolled: undefined,
  lastPollAttempted: undefined,
  lastPolledTimetaken: undefined,
  lastDiscoveredTimetaken: undefined,
  lastDiscovered: undefined,
  lastPing: undefined,
  lastPingTimetaken: undefined,
  purpose: undefined,
  type: undefined,
  serial: undefined,
  icon: undefined,
  pollerGroup: undefined,
  overrideSyslocation: undefined,
  notes: undefined,
  portAssociationMode: undefined,
  maxDepth: undefined,
  disableNotify: undefined,
  ignoreStatus: undefined,
  quyu: undefined,
  quyusub: undefined,
  tag1: undefined,
  tag2: undefined,
  tag3: undefined,
  tag4: undefined,
  tag5: undefined,
  tag6: undefined,
  tag7: undefined,
  tag8: undefined,
  tag9: undefined,
  tag10: undefined,
  tag11: undefined,
  tag12: undefined,
  tag13: undefined,
  xianlu: undefined,
  snmpyes: undefined,
  typeName: undefined,
  x: undefined,
  y: undefined
})
const formRules = reactive({
  hostname: [{ required: true, message: 'IP地址不能为空', trigger: 'blur' }],
  snmpver: [{ required: true, message: 'SNMP版本不能为空', trigger: 'blur' }],
  port: [{ required: true, message: 'port不能为空', trigger: 'blur' }],
  transport: [{ required: true, message: '传输协议不能为空', trigger: 'blur' }],
  snmpDisable: [
    { required: true, message: '是否启用snmp，0为启用，其他为禁用不能为空', trigger: 'blur' }
  ],
  status: [{ required: true, message: '状态，1为在线，其他为离线不能为空', trigger: 'blur' }],
  statusReason: [{ required: true, message: 'status_reason不能为空', trigger: 'blur' }],
  ignore: [{ required: true, message: 'ignore不能为空', trigger: 'blur' }],
  disabled: [{ required: true, message: '0为不禁止，其他为禁止不能为空', trigger: 'blur' }],
  agentUptime: [{ required: true, message: '代理运行时间不能为空', trigger: 'blur' }],
  type: [{ required: true, message: 'type不能为空', trigger: 'change' }],
  pollerGroup: [{ required: true, message: '轮询组不能为空', trigger: 'blur' }],
  portAssociationMode: [{ required: true, message: '端口关联模式不能为空', trigger: 'blur' }],
  maxDepth: [{ required: true, message: '最大深度不能为空', trigger: 'blur' }],
  disableNotify: [{ required: true, message: '是否禁用通知不能为空', trigger: 'blur' }],
  ignoreStatus: [{ required: true, message: '是否忽略状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await DevicesApi.getDevices(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as Devices
    if (formType.value === 'create') {
      await DevicesApi.createDevices(data)
      message.success(t('common.createSuccess'))
    } else {
      await DevicesApi.updateDevices(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    deviceId: undefined,
    inserted: undefined,
    hostname: undefined,
    sysName: undefined,
    display: undefined,
    ip: undefined,
    overwriteIp: undefined,
    community: undefined,
    authlevel: undefined,
    authname: undefined,
    authpass: undefined,
    authalgo: undefined,
    cryptopass: undefined,
    cryptoalgo: undefined,
    snmpver: undefined,
    port: undefined,
    transport: undefined,
    timeout: undefined,
    retries: undefined,
    snmpDisable: undefined,
    bgpLocalAs: undefined,
    sysObjectID: undefined,
    sysDescr: undefined,
    sysContact: undefined,
    version: undefined,
    hardware: undefined,
    features: undefined,
    locationId: undefined,
    os: undefined,
    status: undefined,
    statusReason: undefined,
    ignore: undefined,
    disabled: undefined,
    uptime: undefined,
    agentUptime: undefined,
    lastPolled: undefined,
    lastPollAttempted: undefined,
    lastPolledTimetaken: undefined,
    lastDiscoveredTimetaken: undefined,
    lastDiscovered: undefined,
    lastPing: undefined,
    lastPingTimetaken: undefined,
    purpose: undefined,
    type: undefined,
    serial: undefined,
    icon: undefined,
    pollerGroup: undefined,
    overrideSyslocation: undefined,
    notes: undefined,
    portAssociationMode: undefined,
    maxDepth: undefined,
    disableNotify: undefined,
    ignoreStatus: undefined,
    quyu: undefined,
    quyusub: undefined,
    tag1: undefined,
    tag2: undefined,
    tag3: undefined,
    tag4: undefined,
    tag5: undefined,
    tag6: undefined,
    tag7: undefined,
    tag8: undefined,
    tag9: undefined,
    tag10: undefined,
    tag11: undefined,
    tag12: undefined,
    tag13: undefined,
    xianlu: undefined,
    snmpyes: undefined,
    typeName: undefined,
    x: undefined,
    y: undefined
  }
  formRef.value?.resetFields()
}
</script>
